//选项卡
function  Tabs(){
	var n_nav=document.querySelectorAll(".head_nav li");
	var s_content=document.querySelectorAll(".s_content");
	n_nav.forEach(function(el,index){
		el.addEventListener("click",function(){
			for(var i=0;i<n_nav.length;i++){
				n_nav[i].classList.remove("n_active");
				s_content[i].classList.remove("s_active");
			}
			el.classList.add("n_active");
			s_content[index].classList.add("s_active");
			})
	})

}Tabs()

//推荐页数据
function recommend(){
	var t_song=document.querySelector(".t_song")
	var swiper=document.querySelector(".swiper-wrapper")
	var l_cont=document.querySelector(".l_cont")
	var xhr=new XMLHttpRequest;
	var domain="https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76642"
	xhr.open("GET",domain+"/QQmusic_a")
	xhr.send()
	xhr.addEventListener("readystatechange",function(){
		if(xhr.status==200 && xhr.readyState==4){
//			console.log(xhr.response)
			Tvb(xhr.response)
		}
	})
	function Tvb(obj){
		var obj=JSON.parse(obj)
		arr1=obj.data.radioList
		arr2=obj.data.slider
		arr3=obj.data.songList
		arr1.forEach(function(el){
			t=`
			<li>
				<a href="#">
					<div class="list_media">
						<img src="${el.picUrl}"/>
						<i class="iconfont icon-bofang"></i>
					</div>
					<span>${el.Ftitle}</span>
				</a>
			</li>
			`
			t_song.innerHTML+=t
		})
		arr2.forEach(function(pic){
			s=`
				<a href="${pic.linkUrl}" class="swiper-slide">
		        	<img src="${pic.picUrl}"/>
		        </a>
			`
			swiper.innerHTML+=s
		})
		arr3.forEach(function(hot){
//			console.log(hot)
			var hr="https://y.qq.com/w/taoge.html?ADTAG=myqq&from=myqq&channel=10007100&id=";
			h=`
			<li>
				<a href=${hr+hot.id}>
					<div class="l_pic">
						<img src="${hot.picUrl}"/>
						<i class="iconfont icon-bofang"></i>
						<span><i class="iconfont icon-erji"></i>${((hot.accessnum)/10000).toFixed(1)}万</span>
					</div>
					<div class="l_info">
						<p class="l_title">${hot.songListDesc}</p>
						<span>${hot.songListAuthor}</span>
					</div>
				</a>
			</li>
			`
			l_cont.innerHTML+=h
		})
	}
	
	
}recommend()


//排行页数据
function ranking(){
	var xhr=new XMLHttpRequest;
	var domain="https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76642"
	xhr.open("GET",domain+"/QQmusic_b")
	xhr.send()
	xhr.addEventListener("readystatechange",function(){
		if(xhr.status==200 && xhr.readyState==4){
//			console.log(xhr.response)
			fashion(xhr.response)
		}
	})
	function fashion(res){
		var rank=document.querySelector(".ranking_list ul")
		var res=JSON.parse(res)
		arr4=res.data.topList
		
		arr4.forEach(function(el,i){
//			console.log(el)
			var url="https://y.qq.com/w/toplist.html?ADTAG=myqq&from=myqq&channel=10007100&id="
			s=`<li class="topic_item">
					<a href=${url+el.id+'&type=top'}>
						<div class="r_pic">
							<img src="${el.picUrl}"/>
							<span><i class="iconfont icon-erji"></i>${((el.listenCount)/10000).toFixed(1)}万</span>
						</div>
						<div class="r_con">
							<h5>${el.topTitle}</h5>
							${abc()}
							<span class="topic_arrow"></span>
						</div>
					</a>
				</li>`	
			rank.innerHTML+=s
			function abc(){
				var a='';
				for(var i=0;i<el.songList.length;i++){
					var b=`<p>${i+1}<span class="text_name">${el.songList[i].songname}</span>- ${el.songList[i].singername}</p>`;
					a+=b
				}
				return a
			}
			console.log(el.songList.length)
		})
	}
}
ranking();


//搜索随时

//数据
function Jsonp(){
	var xhr=new XMLHttpRequest;
	var domain="https://www.easy-mock.com/mock/5aa77cbf2b0894377fc76642"
	xhr.open("GET",domain+"/QQmusic_c")
	xhr.send()
	xhr.addEventListener("readystatechange",function(){
		if(xhr.status==200 && xhr.readyState==4){
//			console.log(xhr.response)
			search(xhr.response)
		}
	})
	function search(res3){
		var s_con=document.querySelector(".result_tags")
		var res3=JSON.parse(res3)
		arr5=res3.data.hotkey
		var arr6=[];
		var arr7=[];
//		console.log(arr5)
		arr5.forEach(function(el,i){
			arr6.push(i);
		})
		for(var a,i=0;i<8;i++){
			do{
				a = Math.floor(Math.random()*arr6.length);
//				console.log(a)
			}while(arr6[a]==null);
			arr7.push(arr6[a]);
			t=`<a href="#" class="tag_s">${arr5[arr6[a]].k}</a>`
			arr6[a]=null;
			s_con.innerHTML+=t;
		}
		console.log(arr7)
	}
}Jsonp();
//function RanDom(){
//	
//}RanDom();

